<template>
	<up-popup :show="state.show">
		<view class="header">
			<view class="btn cancel" @click="state.show = false">取消</view>
			<view class="title">{{ props.title }}</view>
			<view class="btn confirm" @click="confirm">确定</view>
		</view>
		<view class="values row">
			<view class="col">
				  <view class="asInput" :class="{active: state.currentTimeType === 'start', placeholder: !state.startTime}" @click="setTimeType('start')">
					  {{ state.startTime || '请选择开始时间' }}
				  </view>
			</view>
			<view class="line">—</view>
			<view class="col">
				<view class="asInput" :class="{active: state.currentTimeType === 'end', placeholder: !state.endTime}" @click="setTimeType('end')">
					  {{ state.endTime || '请选择结束时间' }}			  
				</view>
			</view>
		</view>
		<view class="cont">
			<JXTdateTimePickerVue :invalidTime="props.invalidTime" v-model="state.startTime" v-show="state.currentTimeType === 'start'"></JXTdateTimePickerVue>
			<JXTdateTimePickerVue :invalidTime="props.invalidTime" v-model="state.endTime" v-show="state.currentTimeType === 'end'"></JXTdateTimePickerVue>
		</view>
	</up-popup>
</template>

<script setup>
import { reactive, watch } from 'vue';
import dayjs from 'dayjs';
import JXTdateTimePickerVue from './JXTdateTimePicker.vue';
const props = defineProps({
	title: {
		type: String,
		default: '请选择时间段'
	},
	// 不可用的时间
	invalidTime: {
		type: Array,
		default: () => [] // [[start,end],[start,end]]
	},
	modelValue: {
		type: Array,
		default: () => []
	}
})
const emits = defineEmits(['update:modelValue'])
	const state = reactive({
		show: false,
		currentTimeType: 'start',
		startTime: '',
		endTime: '',
	})
	watch(() => props.modelValue, (value,old) => {
		if(value && value.length) {
			state.startTime = value[0]
			state.endTime = value[1]
		}
	},{
		immediate: true,
		deep: true
	})
	
	const confirm = () => {
		if(!state.startTime) {
			uni.showToast({
				title: '请选择开始时间',
				icon: 'none'
			})
			return;
		}
		if(!state.endTime) {
			uni.showToast({
				title: '请选择结束时间',
				icon: 'none'
			})
			return;
		}
		const startTimestamp = dayjs(state.startTime).valueOf(),
			  endTimestamp = dayjs(state.endTime).valueOf();
		if(startTimestamp >= endTimestamp) {
			uni.showToast({
				title: '结束时间不能小于开始时间',
				icon: 'none'
			})
			return 
		}
		const invalidTimestamp = props.invalidTime.map(item => {
		  return item.map(it => {
			  return dayjs(it).valueOf()
		  })
		})
		const haveInvalidTime = invalidTimestamp.some(item => {
			const [start, end] = item;
			return (startTimestamp <= start && endTimestamp >= start) || (startTimestamp >= start && startTimestamp <= end)
		})
		if(haveInvalidTime) {
			uni.showToast({
				title: '选择时间段内有占用',
				icon: 'none'
			})
			return
		}
		emits('update:modelValue',[state.startTime,state.endTime])
		state.show = false
	}
	
	const setTimeType = (type) => {
		if(state.currentTimeType === type) return;
		state.currentTimeType = type;
	}
	const open = () => {
		state.show = true;
	}
	defineExpose({open})
</script>

<style lang="scss" scoped>
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	.btn {
		font-size: 26rpx;
		&.cancel {
			color: $uni-text-color-grey;
		}
		&.confirm {
			color: $uni-color-success;
		}
	}
	.title {
		font-weight: 600;
		font-size: 28rpx;
	}
}
.values {
	padding: 10rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	$s: 50rpx;
	.col {
		width: calc(50% - #{$s * 0.5});
		flex-shrink: 0;
		.asInput {
			$h: 60rpx;
			height: $h;
			line-height: $h;
			border-radius: 8rpx;
			border: 2rpx solid #dadbde;
			text-align: center;
			font-size: 24rpx;
			&.placeholder {
				color: #999;
			}
			&.active {
				border-color: #4cd964;
			}
		}
	}
	.line {
		width: $s;
		text-align: center;
	}
}
.cont {
	.picker-view {
		width: 100%;
		height: 450rpx;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		.item {
			$h: 68rpx;
			height: $h;
			line-height: $h;
			text-align: center;
		}
	}
}
</style>